<template>
  <div style="margin-left: 14%">
    <!-- 角色权限页 -->
    <el-breadcrumb separator="/">
      <!--面包屑 -->
      <el-breadcrumb-item :to="{ path: '/rolePermissions' }">
        <i class="el-icon-s-home" style="margin-right: 15px; font-size: 16px"></i>角色权限</el-breadcrumb-item>
      <el-breadcrumb-item v-if="$route.query.status === 'add'">新增角色</el-breadcrumb-item>
      <el-breadcrumb-item v-else-if="$route.query.status === 'edit'">编辑角色</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
      <el-card class="box-card">
        <div class="box">
          <div class="roleInfo">角色信息</div>
          <el-form :rules="rules" :inline="true" :model="role" class="demo-form-inline">
              <el-form-item label="角色名称" prop="role_name">
                <el-input v-model="role.role_name" placeholder="请输入角色名称" size="small" clearable></el-input>
              </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card class="foot-card">
        <div class="box">
          <div class="roleInfo">功能权限</div>
          <el-table stripe :data="menuList" style="width: 100%">
            <el-table-column label="可见页面" prop="menu_name" width="360">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.flag">{{scope.row.menu_name}}</el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="操作权限">
              <template slot-scope="scope">
                <el-checkbox :key="index" v-for="(item, index) in scope.row.children" v-model="item.flag" :disabled="!scope.row.flag">{{item.btn_name}}</el-checkbox>
              </template>
            </el-table-column>
          </el-table>
          <el-button style="width: 140px" @click="storage" class="storage" type="primary" size="small">保存</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Bus from '../../public/eventBus'
export default {
data() {
    return {
      role_id: this.$route.query.role_id,
      menuList: [],
      menuIdArr: [],
      btnIdArr: [],
      role: {
        role_name:''
      },
      rules: {
        // 表单验证
          role_name: [
            { required: true, message: '请输入角色名称！', trigger: 'blur' }
          ]
      },
      flag: true  // 用于控制保存按钮是用来新增还是编辑的 true为新增 false为编辑
    }
  },
  async created() { 
    const role_id = this.$route.query.role_id
    if(!role_id) {
      this.getMenuChildrenLists()
    }else{
      const { result: menu_id } = await this.$http.get(`/getRoleMenuId?role_id=${role_id}`)
      const { result: btn_id } = await this.$http.get(`/getRoleBtnId?role_id=${role_id}`)
      if(this.$route.query.role_id) {
        this.flag = false
        this.role.role_name = this.$route.query.role_name
      }
      this.getMenuChildrenList(menu_id, btn_id)
    }
  },
  methods: {
    storage() {
      this.menuList.forEach(item => {
        if(item.flag) {
          this.menuIdArr.push(item.menu_id)
          if(item.children){
            item.children.forEach(item1 => {
              if(item1.flag) {
                this.btnIdArr.push(item1.btn_id)
              }
            })
          }
        }
      })
      if(this.flag){
        this.addRole(this.role.role_name)
      }else{
        if(this.$route.query.role_name === this.role.role_name) {
          this.setRoleBtn(this.btnIdArr)
          this.setRoleMenu(this.menuIdArr)
          this.$message.success('信息更改成功！')
          this.$router.back()
        }else{
          this.editRole()
        }
        
      }
    },

  async setRoleMenu(menuIdArr) {
      if(this.flag){
        // 新增
        await this.$http.post('/setRoleMenu',{role_id: this.role_id, menu_id: menuIdArr})
      }else{
        // 更改
      await this.$http.post('/setRoleMenu',{role_id: this.$route.query.role_id, menu_id: menuIdArr})
      const role_id = JSON.parse(sessionStorage.getItem('userInfo')).role_id;
      if(this.role_id == role_id){
        if(menuIdArr.includes(10)){
          Bus.$emit('getMenu')
        }else{
          Bus.$emit('sendBus',111111)
          this.$router.push('/HomePage')
        }
      }
    }
  },
  async setRoleBtn(btnIdArr) {
      if(this.flag){
        // 新增
        await this.$http.post('/setRoleBtn',{role_id: this.role_id, btn_id: btnIdArr})
      }else{
        // 更改
      await this.$http.post('/setRoleBtn',{role_id: this.$route.query.role_id, btn_id: btnIdArr})
      }
    },
    
    // 新增角色
  async addRole(role_name) {
    if(this.menuIdArr.length === 0){
      return this.$message('请勾选角色菜单权限!')
    }
      const data = await this.$http.post('/roleInfo/addRolename', { role_name: role_name })
       if(data.code !== 200) {
        return this.$message(data.message)
      }
      this.role_id = data.result.role_id
      this.setRoleMenu(this.menuIdArr)
      this.setRoleBtn(this.btnIdArr)
      this.$message.success('角色添加成功！')
      this.$router.back()
    },
    // 更改角色名称
  async editRole() {
      const data = await this.$http.put('/roleInfo/emitRoleName', { role_id: this.$route.query.role_id, role_name: this.role.role_name })
      if(data.code !== 200) {
        return this.$message(data.message)
      }
      this.setRoleMenu(this.menuIdArr)
      this.setRoleBtn(this.btnIdArr)
      this.$message.success('信息更改成功！')
      this.$router.back()
    },
    // 获取带参数所有子菜单列表
  async getMenuChildrenList(menu_id, btn_id) {
      const { result } = await this.$http.get('/menuResources/getMenuChildrenList')
      result.forEach(item => {
        if(item.children){
            item.children.forEach(item1 => {
              btn_id.forEach(item2 => {
                if(item1.btn_id === item2.btn_id) {
                  item1.flag = true // 更改按钮权限复选框状态
                }
              })
            })
          }
        menu_id.forEach(item1 => {
          if(item.menu_id === item1.menu_id) {
            item.flag = true // 更改菜单权限复选框状态
          }
        })
      })
      this.menuList = result;
    },

    // 获取不带参数所有子菜单列表
  async getMenuChildrenLists() {
      const { result } = await this.$http.get('/menuResources/getMenuChildrenList')
      this.menuList = result;
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./AddRole.scss";
</style>